<template>
  <div>
    <!-- ping -->
    <ping :ping="ping" @guanbi="pingguanbi($event)"></ping>
    <div class="tree-box moreLine" :style="{ paddingBottom: transferHeight.pb + 'px' }">
      <div>
        <span>设备所在辖区</span>
        <treesBox v-if="shuaxingTree" :treesBox="treesBox" @handleNodeClick="treeClick($event)"></treesBox>
      </div>
    </div>
    <div class="main_r" :style="{ minHeight: transferHeight.contentH + 'px' }">
      <div class="b">
        <!-- 搜索条件 -->
        <el-form :inline="true" :model="searchCriteria" class="demo-form-inline">
          <el-form-item label="设备状态:">
            <el-select v-model="searchCriteria.isGZ" class="inputWidth" clearable placeholder="请选择">
              <el-option label="正常" value="0"></el-option>
              <el-option label="断网" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model.trim="searchCriteria.namer" width="200" prefix-icon="el-icon-search" clearable placeholder="输入设备名称或设备IP"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit2()" class="btnSizeStyle">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table
          :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
          :cell-class-name="addClass"
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          border
          highlight-current-row
          stripe
          v-loading="tableLoad"
          @sort-change="sortthiscolumn"
        >
          <!-- 提示语句 -->
          <template slot="empty">{{ tableMessage }}</template>
          <el-table-column type="index" label="序号" min-width="50" align="center" />
          <el-table-column prop="zclxmc" label="设备名称" sortable :show-overflow-tooltip="true" min-width="180">
            <template slot-scope="scope">
              <span>
                <!-- <el-tooltip class="item" :content="scope.row.zt === 1 ? '下线' : '上线'" effect="light" placement="top-start" popper-class="atooltip"> -->
                <svg class="iconfont" aria-hidden="true" style="width: 12px; height: 12px; vertical-align: middle; margin-right: 5px">
                  <use :xlink:href="'#el-icon-my' + (scope.row.zt === 1 ? 'warning' : 'generated')" style="font-size: 50px" />
                </svg>
                <!-- </el-tooltip> -->
                {{ scope.row.zcmc }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="zcmc" label="设备类型" min-width="150" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-html="getsblx(scope.row)"></span>
              <!-- <span>{{ scope.row.zclxmc }}</span> -->
            </template>
          </el-table-column>
          <el-table-column label="安装地址" min-width="180" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.sfmc + scope.row.csmc + scope.row.qxmc + scope.row.xzjdmc + scope.row.xxdz }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ip" label="设备IP" min-width="120"></el-table-column>
          <el-table-column prop="ppmc" label="品牌" min-width="80"></el-table-column>
          <el-table-column prop="xh" label="型号" min-width="120"></el-table-column>
          <el-table-column prop="sxxsj" label="诊断时间" sortable min-width="160">
            <template slot-scope="scope">{{ scope.row.sxxsj | dateFormat }}</template>
          </el-table-column>
          <el-table-column prop="zclxmc" label="宿主" min-width="98">
            <template slot-scope="scope">
              <!-- <el-tooltip
                class="item"
                :content="item.SZMC"
                placement="top-start"
                popper-class="atooltip"
                v-for="item in scope.row.szs"
                :key="item.SZLX"
                v-show="scope.row.szs.length === 0 ? false : true"
              >
                <svg class="iconfont" aria-hidden="true" style="width: 20px; height: 20px; vertical-align: middle; margin-right: 5px">
                  <use :xlink:href="'#el-icon-my' + shuZhu[item.SZLX]" style="font-size: 50px" />
                </svg>
              </el-tooltip>-->
              <span v-for="(item, index) in scope.row.szs" :key="index">
                <el-tooltip v-if="Number(item.SZLX) >= 0" class="item" placement="top-start" popper-class="atooltip">
                  <div slot="content">{{ item.SZMC }}</div>
                  <svg class="iconfont" aria-hidden="true" style="width: 20px; height: 20px">
                    <!-- 0运维主机 1卡口 2电警 -->
                    <use :xlink:href="`#el-icon-mysuzhu_${item.SZLX}`" style="font-size: 50px" />
                  </svg>
                </el-tooltip>
                <svg v-else class="iconfont" aria-hidden="true" style="width: 20px; height: 20px">
                  <!-- 0运维主机 1卡口 2电警 -->
                  <use :xlink:href="`#el-icon-my${grayIcon[index]}`" style="font-size: 50px" />
                </svg>
              </span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="150" align="right">
            <template slot-scope="scope">
              <div class="operations">
                <!-- 不可以点击加上 noAction这个类名 -->
                <!-- <el-button type="text" @click="handleClick(scope.row)">编辑</el-button> -->
                <el-button type="text" :disabled="scope.row.ip !== '' && scope.row.ip !== null ? false : true" @click="yuanChenKZ(scope.row)">远程控制</el-button>
                <span class="operation"></span>
                <el-button type="text" @click="showPingOk(scope.row)" :disabled="scope.row.ip !== '' && scope.row.ip !== null ? false : true">ping</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row class="page-row">
          <el-col :span="12">
            <div class="bigBOx btnBefore">
              <div class="imgBox">
                <svg class="iconfont imgIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-mygenerated" />
                </svg>
                <span>上线</span>
              </div>
              <div class="imgBox">
                <svg class="iconfont imgIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-mywarning" />
                </svg>
                <span>下线</span>
              </div>
              <div class="imgBox">
                <svg class="iconfont imgIcon size17" aria-hidden="true">
                  <use xlink:href="#el-icon-mysuzhu_0" />
                </svg>
                <span>运维主机</span>
              </div>
              <div class="imgBox">
                <svg class="iconfont imgIcon size17" aria-hidden="true">
                  <use xlink:href="#el-icon-mysuzhu_1" />
                </svg>
                <span>卡口</span>
              </div>
              <div class="imgBox">
                <svg class="iconfont imgIcon size17" aria-hidden="true">
                  <use xlink:href="#el-icon-mysuzhu_2" />
                </svg>
                <span>电子警察</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12" style="height: 47px; display: table">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next"
              :total="total"
            ></el-pagination>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { getUrl } from '@/utils/getUrl.js'
import { xunJian } from '@/utils/allUrl.js'
// import { endLoading } from '@/utils/loading.js'
import Ping from '@/components/ping/index.vue'
import treesBox from '@/components/treesBox/index.vue'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
import { threeLevelH } from '@/assets/js/calcHeight'
export default {
  computed: {
    transferHeight: function () {
      // 计算屏幕滚动高度 - nav - 导航栏
      return {
        contentH: window.innerHeight - threeLevelH,
        pb: threeLevelH,
      }
    },
  },
  components: { Ping, treesBox },
  data() {
    return {
      ping: {
        name: '', // ping设备名称
        speedOpen: false, // ping框
        ip: '',
      },
      treesBox: {
        // url: 'yonghu/selectYongHuXiaQuByZjyxs',
        url: 'ZI_CHAN',
        GZKZ: false,
      }, // tree图的请求地址
      shuaxingTree: true, // 刷新tree
      shuZhu: ['suzhu_0', 'suzhu_1', 'suzhu_2'], // 宿主
      searchCriteria: {
        isGZ: '', // 故障类型
        namer: '',
      },
      tableData: [],
      currentPage: 1, // 页码
      pageSize: 10, // 页数
      total: 0, // 总条数
      wtbmdjs: 1,
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
      xianQu: null, // 辖区搜索条件
      tableLoad: false,
      tableMessage: '',
      tableTimer: null,
      grayIcon: ['zhuji_hui', 'kakou_hui', 'dzjc_hui'],
      listQuery: {
        sortby: '',
        order: '',
      },
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.tableData = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
  },

  created() {
    // 获取数据
    this.initList()
  },
  methods: {
    getsblx(row) {
      return `<span>${row.zclxmc1 ? row.zclxmc1 + ' / ' : ''}</span>
                <span>${row.zclxmc2 ? row.zclxmc2 + ' / ' : ''}</span>
                <span>${row.zclxmc}</span>`
    },
    async initList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      this.treeData = await JSON.parse(getUrl('xiaquCity'))
      const params = new URLSearchParams()
      const user = JSON.parse(getUrl('userconter'))
      params.append('userId', user.id)
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      const { data: res } = await this.$http.post(`${xunJian}zjyxs/list`, params)
      this.tableLoad = false
      switch (res.code) {
        case '0000':
          this.total = res.data.countList
          this.tableData = res.data.list
          break
        default:
          this.tableData = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
    },
    sortthiscolumn(column) {
      // 排序
      this.tableLoad = true // 加载中样式
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      this.initList()
    },
    onSubmit2() {
      this.currentPage = 1
      this.pageSize = 10
      this.onSubmit(1, 10)
    },
    async onSubmit(size, current, val) {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const { isGZ, namer } = this.searchCriteria
      const params = new URLSearchParams()
      const user = JSON.parse(getUrl('userconter'))
      if (val) {
        if (val.levels === 1) {
          params.append('SF', val.label)
        } else if (val.levels === 2) {
          params.append('CS', val.label)
        } else if (val.levels === 3) {
          params.append('QX', val.label)
        } else if (val.levels === 4) {
          params.append('XZJD', val.label)
        }
      } else {
        if (this.xianQu) {
          if (this.xianQu.levels === 1) {
            params.append('SF', this.xianQu.label)
          } else if (this.xianQu.levels === 2) {
            params.append('CS', this.xianQu.label)
          } else if (this.xianQu.levels === 3) {
            params.append('QX', this.xianQu.label)
          } else if (this.xianQu.levels === 4) {
            params.append('XZJD', this.xianQu.label)
          }
        }
      }
      params.append('userId', user.id)
      params.append('ZT', isGZ)
      params.append('ZCMC_IP', namer)
      params.append('M_', size)
      params.append('N_', current)
      const { data: res } = await this.$http.post(`${xunJian}zjyxs/list`, params)
      this.tableLoad = false
      switch (res.code) {
        case '0000':
          this.total = res.data.countList
          this.tableData = res.data.list
          break
        case '0013':
          this.tableData = []
          this.total = 0
          this.tableMessage = res.message
          break
        default:
          this.tableMessage = res.message
          this.total = 0
          break
      }
      // if (res.code === '0014') {
      //   return ''
      // } else if (res.code === '0013') {
      //   this.total = 0
      //   return (this.tableData = [])
      // } else if (res.code !== '0000') {
      //   return this.$message({
      //     type: 'error',
      //     message: res.message,
      //     center: true,
      //   })
      // }
      // this.total = res.data.countList
      // this.tableData = res.data.list
      // this.reload()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.onSubmit(this.currentPage, val)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.onSubmit(val, this.pageSize)
    },
    yuanChenKZ(scope) {
      if (scope.zclxmc === '运维主机' && scope.zclxid === '53') {
        // this.$router.push('/mainboard')
        //   跳转界面 //MainBoardEdit
        localStorage.setItem('SN', scope.sbxlh)
        localStorage.setItem('password', scope.dlmm)
        localStorage.setItem('IP', scope.ip)
        localStorage.setItem('XQBM', scope.xqbm)
        sessionStorage.setItem('mianUrl', '')
        localStorage.setItem('zcmc', scope.zcmc)
        this.$router.push({ name: 'mainboaredit' })
      } else {
        window.open('http://' + scope.ip, '_blank')
      }
    },
    // ping
    showPingOk(scope) {
      this.ping.speedOpen = true
      this.ping.ip = scope.ip
      this.ping.name = scope.zcmc
    },
    // ping组件
    pingguanbi(val) {
      this.ping = {
        speedOpen: val.type,
        name: '', // ping设备名称
        ip: '',
      }
    },
    // tree形搜索
    treeClick(e) {
      this.pageSize = 10
      this.currentPage = 1
      this.onSubmit(1, 10, e.type)
      this.xianQu = e.type
    },
    // reload() {
    //   this.shuaxingTree = false
    //   this.$nextTick(() => (this.shuaxingTree = true))
    // },
    addClass({ row, column, rowIndex, columnIndex }) {
      // console.log('row:', row, 'column:', column, 'rowIndex:', rowIndex, 'columnIndex:', columnIndex)
      // if (columnIndex === 0) {
      //   return 'fontColor'
      // }
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/xjzxCommon.scss';
</style>
